1. inline style

                      
                    export default function Home() {
                      return (
                        
                              
                                <div style={ { color: "red" }}>test </div>
                              
                      )
                    }

                    

{ { }} is used for inline style

2. link css file

Create a css file in css/style.css

                    .title{
                        color:red;
                    }
                    

link the css file in page layout app/about.tsx

                    import '../css/style.css'
                    

use the class

                    <div className="title">test </div>
                  

Complete code

                    
import '../css/style.css'


export default function Home() {
  return (
    
           
             <div className="title">test </div>
           
  )
}

3. using Module css

Create module css file in css/Home.module.css

.paragraph {
      font-size: 16px;
      text-align: center;
    }

    .paragraph:hover {
      color: red;
    }
  

link the module css

  import styles from '../css/Home.module.css'
  

usage

  <p className={styles.paragraph}>I am styled with CSS modules</p>
  

Complete code

  import styles from '../css/Home.module.css'
   export default function Home() {
      return (
        <p className={styles.paragraph}>I am styled with CSS modules</p>
      )
    }
  

4. image linking

<img  src="assets/images/banner.png" >